<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="top">
        hello world
        asdfalsdjfljl
        <div id="hello">

        点击测试
        </div>
        <button>点我加载</button>
        <!-- <div id="anpage1" class="anpage" style="">

            </div> -->
        <component src="./page1.html" props="{back:1}"></component>
            <div id="anpage2" style="width:95%">

                </div>
        
    </div>
    
    </script>
    <script>
        if(props["now"]==null) props["now"]=1;
        if(props.now<1)
        {
            // loadFile($("#anpage2")[0],"./page2.html",{now:props["now"]+1});
        }
            
        // loadFile($("#anpage1")[0],"./page1.html");
        $("#hello").click(()=>{
            msghub.component("./page1.html").send("来自page2");
        })
        let s=1;
        $("button").click(()=>{
            let ele=document.createElement("div");
            ele.className="anpage";
            ele.setAttribute("data-stellar-ratio",s*0.5);
            ele.style.position="relative";
            ele.style.marginTop="50px;"
            s++;
            $("#top")[0].appendChild(ele);
            loadFile(ele,"./page1.html");
        });
        d3.timer((e)=>{
            d3.selectAll($("div").toArray()).transition().duration(200).attr("r",a++);
            d3.select("div").transition().duration(200).style("background-color",`rgb(${a/2},${a/1.8},${a/1.5})`);
        });
    </script>
    <style>
        div#top
        {
            background: green;
            border: solid 2px yellow;
            height: 1000px;
            overflow: scroll;
        }
        #hello:hover
        {
            background:black;
        }
        #anpage1
        {
            border:solid 5px grey;
        }
        .anpage
        {
            width:600px;height:700px;margin-left:50px;display: inline-block;
        }
    </style>

</body>
</html>